<template>
    <div class="photoinfo">
        <h4>{{ photoinfo.title }}</h4>
        <p>
            <span>发表时间：<span>{{ photoinfo.add_time | dateFormat}}</span></span>
            <span>点击 <span>{{ photoinfo.click }}</span> 次</span>
        </p>
        <div class="hr"></div>    
        <!-- 缩略图 -->
        <div class="thumb">
            <vue-preview :slides="thumbsnail"></vue-preview>
        </div>
        <!-- 内容 -->
        <div class="content" v-html="photoinfo.content"></div>
        <!-- 评论区 -->
        <comment-box></comment-box>
    </div>
</template>

<script>
import Comment from '../subcomponents/Comment' // 引入评论组件
    export default {
        data() {
            return {
                photoinfo: {},
                id: this.$route.params.id,
                thumbsnail: [] // 缩略图
            }
        },
        methods: {
            getPhtotInfo(){ // 获取图片详细信息
                var url = "https://www.fastmock.site/mock/3bcb60e708abec194c722ac5464b28d8/VueApp/getphotoinfo"
                this.$http.get(url).then(res=>{
                    if(res.status == 200){
                        var list = res.data.photoinfo
                        for(let i=0;i<list.length;i++){
                            if(this.id == list[i].id){
                                this.photoinfo = list[i]
                            }
                        }
                    }
                })
            },
            getThumbs(){ // 获取缩略图
                var url = "https://www.fastmock.site/mock/3bcb60e708abec194c722ac5464b28d8/VueApp/getthumbs"
                this.$http.get(url).then(res=>{
                    if(res.status == 200){
                        res.data.thumbs.forEach(item => {
                            item.w = 600
                            item.h = 400
                            item.msrc = item.src = item.img
                            // msrc与 src都是必备属性缺一不可
                        });
                        this.thumbsnail = res.data.thumbs
                        console.log(this.thumbsnail)
                    }
                })
            }
        },
        components: { // 注册子组件
            "comment-box": Comment
        },
        created() {
            this.getPhtotInfo()
            this.getThumbs()
        },
    }
</script>

<style lang="scss" scoped>
.photoinfo{
    h4{
        text-align: center;
        font-size: 18px;
        line-height: 1.4em;
        font-weight: bold;
        padding-left: 10px;
        padding-top: 10px;
        padding-right: 10px;
        color: crimson;
    }
    p{
        font-size: 12px;
        margin-left: 10px;
        padding-right: 10px;
        display: flex;
        justify-content: space-between;
        color: silver;
        span{
            &:nth-child(1)>span{
                color: darkcyan;
            }
            &:nth-child(2)>span{
                color: crimson;
                font-weight: bold;
            }
        }
    }
    .hr{
        width: 94%;
        height: 1px;
        background-color: silver;
        margin: auto;
    }
    .content{
        margin-top: 10px;
        text-indent: 2em;
        padding: 0 10px 10px 10px;
        font-size: 14px;
        text-align: justify;
        line-height: 1.75em;
        p{
            color: #000;
        }
    }
    .thumbs {
        
    /deep/    .my-gallery {
            display: flex;
            // flex-wrap: wrap;

            figure {
                // width: 30%;
                // margin: 5px;
                img {
                    margin-left: 10px;
                }
            }
        }
    }
}
</style>